<!DOCTYPE html>
<html>
<head>
<style type="text/css">

</style>
</head>
<body>

<div id="svg">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="border:1px solid #f00;">
	<circle cx="100" cy="50" r="40" stroke="black"stroke-width="2" fill="red" />
  	<foreignObject width="120" height="50">
		<div>sfsdfs</div>
		<canvas id="canvas" style="width:100px;height: 100px;"></canvas>
    </foreignObject>
</svg>
</div>

<img id="result" src=""/>
</body>
</html>
<script type="text/javascript">
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

var svg = document.getElementById("svg");
var svgXml = svg.innerHTML;
var image = new Image();
image.src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(svgXml)));
//给图片对象写入base64编码的svg流
document.getElementsByTagName("body")[0].appendChild(image);
var canvas = document.createElement('canvas');  //准备空画布


var context = canvas.getContext('2d');  //取得画布的2d绘图上下文
context.drawImage(image, 0, 0);

var a = document.createElement('a');
a.href = canvas.toDataURL('image/png');  //将画布内的信息导出为png图片数据
a.download = "MapByMathArtSys";  //设定下载名称
a.click(); //点击触发下载

</script>